<script>
import { defineComponent, getCurrentInstance } from "vue";

export default defineComponent({
  props: {
    that: Object,
  },
  setup(props) {
    return { that: props.that };
  },
  render() {
    let that = this.that;
    return (
      <div class="styleValue">
        <span>结构编辑</span>
        <div style={{ width: "100%" }}>
          {this.$store.state.aimAttrs.navMenuList.value.map((item, index) => {
            if (
              this.$store.state.aimAttrs.navMenuList.type == "navMenuSub" &&
              index == 0
            ) {
              return (
                <div class="styleValue" style={{ width: "100%" }}>
                  <span>
                    {this.$store.state.aimAttrs.navMenuList.type == "navMenu"
                      ? `下标：${index}`
                      : item}
                  </span>
                  <a-button
                    type="primary"
                    onClick={() => {
                      this.navMenuSubNum = index;
                      this.navMenuJud = true;
                      this.navMenuText = item;
                    }}
                  >
                    <template v-slots={icon}>
                      <EditOutlined />
                    </template>
                    修改
                  </a-button>
                </div>
              );
            }
            return (
              <div class="styleValue" style={{ width: "100%" }}>
                <span>
                  {this.$store.state.aimAttrs.navMenuList.type == "navMenu"
                    ? `下标：${index}`
                    : item}
                </span>
                <a-button-group>
                  <a-button
                    type="primary"
                    disabled={
                      this.$store.state.aimAttrs.navMenuList.type ==
                      "navMenuSub"
                        ? index == 1
                        : index == 0
                    }
                    onClick={() => {
                      this.$store.commit("aimAttrsChange", {
                        newValue: [
                          this.$store.state.aimAttrs.navMenuList.type,
                          index,
                          "up",
                        ],
                        attrsName: "changeNavMenuList",
                        that,
                      });
                    }}
                  >
                    <template v-slots={icon}>
                      <ArrowUpOutlined />
                    </template>
                    上移
                  </a-button>
                  <a-button
                    type="primary"
                    disabled={
                      index ==
                      this.$store.state.aimAttrs.navMenuList.value.length - 1
                    }
                    onClick={() => {
                      this.$store.commit("aimAttrsChange", {
                        newValue: [
                          this.$store.state.aimAttrs.navMenuList.type,
                          index,
                          "down",
                        ],
                        attrsName: "changeNavMenuList",
                        that,
                      });
                    }}
                  >
                    <template v-slots={icon}>
                      <ArrowDownOutlined />
                    </template>
                    下移
                  </a-button>
                  <a-button
                    type="primary"
                    onClick={() => {
                      this.$store.commit("aimAttrsChange", {
                        newValue: [
                          this.$store.state.aimAttrs.navMenuList.type,
                          index,
                          "delete",
                        ],
                        attrsName: "changeNavMenuList",
                        that,
                      });
                    }}
                  >
                    <template v-slots={icon}>
                      <DeleteOutlined />
                    </template>
                    删除
                  </a-button>
                  <a-button
                    type="primary"
                    onClick={() => {
                      this.navMenuSubNum = index;
                      this.navMenuJud = true;
                      this.navMenuText = item;
                    }}
                  >
                    <template v-slots={icon}>
                      <EditOutlined />
                    </template>
                    修改
                  </a-button>
                </a-button-group>
              </div>
            );
          })}
          <div
            style={{
              display: "flex",
              "justify-content": "space-between",
              margintop: "10px",
            }}
          >
            {this.$store.state.aimAttrs.navMenuList.type == "navMenu" && (
              <a-select
                value={this.navMenuCategory}
                onChange={(e) => {
                  this.navMenuCategory = e;
                }}
              >
                <a-select-option value="1">下拉菜单</a-select-option>
                <a-select-option value="2">文字</a-select-option>
              </a-select>
            )}
            <a-button
              type="primary"
              ghost
              size="small"
              style={{ width: "45%", margin: "5px 0" }}
              onClick={() => {
                this.$store.commit("aimAttrsChange", {
                  newValue:
                    this.$store.state.aimAttrs.navMenuList.type == "navMenu"
                      ? this.navMenuCategory
                      : "navMenuSub",
                  attrsName: "addNavMenuList",
                  that,
                });
              }}
            >
              添加新模块
            </a-button>
          </div>
        </div>
      </div>
    );
  },
});
</script>
